<template>
  <div class="filter-origin">
    <!--<myheader></myheader>-->
    <waiting :waitingForYou="isPosting" :updateData="!updateData"></waiting>
    <div class="filter-header" v-if="hasFiltering">
      <h1>{{topic}}</h1>
      <span v-if="subhead" class="subhead">{{subhead}}</span>
      <div class="filter">
        <div class="filter-center">
          <span @click="sideslipOriginal(changeOriginal)">筛选</span>
          <span><img src="../assets/picture/filter-origin.png" width="16" height="16"></span>
        </div>
      </div>
    </div>
    <div class="filter-header remove-border" v-else>
      <h1>{{originName}}</h1>
      <span class="sub-topic">{{topicName}}</span>
      <span v-if="subhead" class="subhead">{{subhead}}</span>
      <div class="filter">
        <div class="filter-center">
          <span @click="sideslipOriginal(changeOriginal)">筛选</span>
          <span><img src="../assets/picture/filter-origin.png" width="16" height="16"></span>
        </div>
      </div>
    </div>
    <div class="map-france" v-if="hasFiltering">
      <img src="../assets/picture/france-map.png" width="100%">
      <div :class="original.className" v-for="(original, index) of originals" :key="index" @click="sideslipOriginal(index)">
        <img :src="original.pic" width="47" height="47">
        <span>{{original.originalName}}</span>
      </div>
    </div>
    <div class="filter-goods" v-else>
      <div class="filter-one-goods" v-for="(goods, index) of allGoods" :key="index">
        <h1>{{goods.name}}</h1>
        <p class="remark">{{goods.remark}}</p>
        <router-link class="goods-detail" v-for="(oneGoods, index2) of goods.rules" :key="index2" :to="'/filter-goods/'+oneGoods.id">
          <div class="goods-img">
            <img :src="picURL + oneGoods.pic" alt="商品图片示例" width="120px" height="120">
            <div class="collect-icon" @click="collectWine(index, index2, $event)">
              <img :src="oneGoods.isCollected ? collected : collect" alt="收藏图标" width="16" height="16">
            </div>
          </div>
          <div class="goods-info">
            <h2>{{oneGoods.name}}</h2>
            <p class="little-info">产地：{{oneGoods.sub_chanqu}}</p>
            <p class="little-info">等级：{{oneGoods.grade}}</p>
            <p class="little-info">酒庄出厂价：<span v-if="hasHeader">{{oneGoods.min1 | filterNull}}-{{oneGoods.max1 | filterNull}}</span><router-link v-else to="/login">登录可见</router-link></p>
            <p class="little-info">国内现货价：<span v-if="hasHeader">{{oneGoods.min2 | filterNull}}-{{oneGoods.max2 | filterNull}}</span><router-link v-else to="/login">登录可见</router-link></p>
          </div>
        </router-link>
      </div>
    </div>
    <sideslip :sideslipOk="filtering" @upup="hidefilter(sideslipWidth - 76)">
      <div class="filter-origin-topic" :style="{right: rightParent}">
        <div class="filter-content">
          <h1>筛选</h1>
          <div class="all-originals">
            <h2>产区</h2>
            <span :class="{activity: changeOriginal == index}" v-for="(original, index) of originals" :key="index" @click="changeOriginalNumber(index)">{{original.originalName}}</span>
          </div>
          <div class="all-topics" v-if="originals[changeOriginal].topics[0]">
            <h2>主题</h2>
            <span :class="{activity: originals[changeOriginal].changeTopic == index}" v-for="(topic, index) of originals[changeOriginal].topics" :key="index" @click="changeTopicNumber(index)"><p>{{topic.name}}</p></span>
          </div>
        </div>
        <button @click="filterSuccess(sideslipWidth - 76)">确定</button>
      </div>
    </sideslip>
    <myfooter></myfooter>
    <toast ref="toast"></toast>
  </div>
</template>

<script>
  import champagne from '../assets/picture/champagne.png'
  import arthas from '../assets/picture/arthas.png'
  import loire from '../assets/picture/Loire.png'
  import burgundy from '../assets/picture/burgundy.png'
  import cognac from '../assets/picture/cognac.png'
  // import bordeaux from '../assets/picture/bordeaux.png'
  import rhone from '../assets/picture/rhone.png'
  import provence from '../assets/picture/provence.png'
  import languedoc from '../assets/picture/languedoc.png'
  import collect from '../assets/picture/collect-origin.png'
  import collected from '../assets/picture/collected-origin.png'

  import myheader from '@/components/header'
  import myfooter from '@/components/footer'
  import sideslip from '@/components/sideslip'
  import toast from '../components/toast'
  import waiting from '../components/waiting'
  export default {
    name: 'import',
    components: {
      myheader,
      myfooter,
      sideslip,
      toast,
      waiting
    },
    data () {
      return {
        topic: '覆盖法国九大产区',
        subhead: '',  // 显示的主题
        originals: [
          {className: 'bordeaux', pic: require('../assets/picture/bordeaux.png'), originalName: '波尔多', topics: [], changeTopic: 0},
          {className: 'burgundy', pic: burgundy, originalName: '勃艮第', topics: [], changeTopic: 0},
          {className: 'rhone', pic: rhone, originalName: '罗讷河谷', topics: [], changeTopic: 0},
          {className: 'languedoc', pic: languedoc, originalName: '朗格多克', topics: [], changeTopic: 0},
          {className: 'loire', pic: loire, originalName: '卢瓦尔', topics: [], changeTopic: 0},
          {className: 'champagne', pic: champagne, originalName: '香槟', topics: [], changeTopic: 0},
          {className: 'arthas', pic: arthas, originalName: '阿尔萨斯', topics: [], changeTopic: 0},
          {className: 'provence', pic: provence, originalName: '普罗旺斯', topics: [], changeTopic: 0},
          {className: 'cognac', pic: cognac, originalName: '干邑', topics: [], changeTopic: 0}
        ],  // 所有产区信息
        changeOriginal: 0,  // 所选产区
        filtering: false,   // 判断是否显示侧滑框及透明层
        hasFiltering: true,
        rightParent: '',    // 偏移位置
        sideslipWidth: '',  // 屏幕宽度
        hasHeader: '',
        collect: collect,
        collected: collected,
        picURL: this.$utils.fineURL(),
        allGoods: [],   // 所选产区商品
        pageNum: 0,     // 页码
        topicId: '',    // 主题id
        topicName: '',  // 产区主题
        originName: '',  // 产区名字
        isPosting: false, // 判断是否正在请求数据
        updateData: true
      }
    },
    created () {
      this.hasHeader = this.$utils.getCookie('USER_NAME')
    },
    beforeMount () {
      this.sideslipWidth = document.body.clientWidth || document.documentElement.clientWidth
      this.rightParent = -this.sideslipWidth + 76 + 'px'
    },
    methods: {
      changeOriginalNumber (index) {
        this.changeOriginal = index
        this.allTopic(index)
        this.topicId = ''
      },
      // 筛选主题
      changeTopicNumber (index) {
        this.originals[this.changeOriginal].changeTopic = index
        var cateId = this.originals[this.changeOriginal].changeTopic
        this.topicId = this.originals[this.changeOriginal].topics[cateId].id
      },
      // 通过产区确定主题
      allTopic (index) {
        this.$http({
          method: 'post',
          url: this.$utils.fineURL() + '/m/goodscate_subdata.htm',
          headers: {'USER_NAME': this.hasHeader},
          body: {'original': this.originals[index].originalName},
          emulateJSON: true
        }).then(function (response) {
          response = JSON.parse(response.bodyText)
          this.originals[index].topics = response
          if (this.originals[index].topics[this.originals[index].changeTopic]) {
            this.topicId = this.originals[index].topics[this.originals[index].changeTopic].id
          }
        }, function (response) {
          console.log(response)
        })
      },
      // 点击主题后的操作
      sideslipOriginal (index) {
        this.filtering = true
        this.changeOriginal = index
        this.allTopic(index)
        this.slide(this.rightParent)
      },
      // 点击确认后的操作
      filterSuccess (duration) {
        this.hasFiltering = false
        this.filtering = false
        this.pageNum = 0
        this.allGoods = []
        this.filterGoods()
        this.slide(duration)
        this.originName = this.originals[this.changeOriginal].originalName
        this.topicName = this.originals[this.changeOriginal].topics[this.originals[this.changeOriginal].changeTopic].name
        window.addEventListener('scroll', this.loadingMoreGoods, false)
      },
      hidefilter (duration) {
        this.filtering = false
        this.slide(duration)
      },
      // 侧滑动效
      slide (duration) {
        var that = this
        var timer
        clearInterval(timer)
        timer = setInterval(function () {
          var speed = -parseInt(duration) / 8
          speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
          if ((speed >= 0 && parseInt(that.rightParent) >= 0) || (speed <= 0 && parseInt(that.rightParent) <= parseInt(-that.sideslipWidth + 76))) {
            clearInterval(timer)
          } else {
            duration = parseInt(duration) + speed
            that.rightParent = parseInt(that.rightParent) + speed + 'px'
          }
        }, 10)
      },
      // 筛选出来的商品
      filterGoods () {
        this.isPosting = true
        this.pageNum += 1
        if (this.topicId) {
          this.$http({
            method: 'post',
            url: this.$utils.fineURL() + '/m/goodscun_subdata.htm',
            headers: {'USER_NAME': this.hasHeader},
            params: {page: this.pageNum, cateId: this.topicId, size: 5},
            emulateJSON: true
          }).then(function (response) {
            response = JSON.parse(response.bodyText)
            if (response) {
              for (var i in response) {
                this.allGoods.push(response[i])
              }
              this.isPosting = false
              this.updateData = true
            }
          }, function (response) {
            console.log(response)
            this.pageNum -= 1
            this.isPosting = false
            this.updateData = true
          })
        } else {
          location.href = 'http://www.finewest.cn/store_goods_list.htm?gc_id=66172&is_b=1&chanqu=' + this.originals[this.changeOriginal].originalName
        }
      },
      // 加载更多商品
      loadingMoreGoods () {
        var scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
        var allHeight = document.body.scrollHeight || document.documentElement.scrollHeight
        var clientHeight = document.body.clientHeight > document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight
        console.log(scrollTop + '/' + allHeight + '/' + clientHeight)
        if (scrollTop + clientHeight >= allHeight - 100) {
          if (!this.isPosting) {
            this.updateData = false
            this.filterGoods()
          }
        }
      },
      // 收藏
      collectWine (index, index2, event) {
        event = window.event || event
        event.cancelBubble = true
        event.preventDefault()
        if (!this.hasHeader) {
          this.$refs.toast.toastFun('请先登录', 3000, function () {
            return false
          })
        } else {
          console.log(this.allGoods[index].rules[index2].isCollected)
          this.allGoods[index].rules[index2].isCollected = !this.allGoods[index].rules[index2].isCollected
        }
      }
    },
    filters: {
      filterNull (index) {
        return !index ? '' : index
      }
    },
    destroyed () {
      window.removeEventListener('scroll', this.loadingMoreGoods, false)
    }
  }
</script>

<style scope lang="scss">
  $word-color: #444444;
  $word-fondsize: 14px;
  html{
    height: 100%;
  }
  body{
    overflow-x: hidden;
    position: relative;
  }
  .filter-origin{
    .filter-header{
      position: relative;
      height: 44px;
      border-bottom: 1px solid #bbbbbb;
      h1{
        font-size: $word-fondsize;
        color: $word-color;
        height: 100%;
        line-height: 44px;
        text-indent: 13px;
        font-weight: normal;
      }
      .filter{
        position: absolute;
        right: 0;
        top: 0;
        width: 88px;
        height: 44px;
        text-align: center;
        line-height: 44px;
        border-left: 1px solid #bbbbbb;
        .filter-center{
          display: table;
          margin: 0 auto;
            span{
              font-size: $word-fondsize;
              color: $word-color;
              display: table-cell;
              vertical-align: middle;
              img{
                vertical-align: middle;
              }
          }
        }
      }
    }
    .filter-header.remove-border{
      border-bottom: none;
      h1{
        float: left;
        color: #e92d46;
      }
      span.sub-topic{
        line-height: 45px;
        font-size: 14px;
        color: $word-color;
        margin-left: 27px;
        position: relative;
        &:after{
          content: '';
          position: absolute;
          width: 1px;
          height: 16px;
          top: 0px;
          left: -13px;
          background: #bbbbbb;
        }
      }
      .filter{
        border-left: none;
        &:after{
          content: '';
          position: absolute;
          width: 1px;
          height: 16px;
          background: #bbbbbb;
          top: 14px;
          left: 0;
        }
      }
    }
    .map-france{
      position: relative;
      margin-top: 15px;
      span{
        font-size: $word-fondsize;
        color: #ffffff;
        text-align: center;
        display: block;
      }
      img{
        display: table;
        margin: 0 auto 3px;
      }
      .champagne{
        position: absolute;
        display: table;
        top: 11.78%;
        left: 58.13%;
      }
      .arthas{
        position: absolute;
        display: table;
        top: 23.3%;
        right: 6.4%;
      }
      .loire{
        position: absolute;
        display: table;
        top: 32.46%;
        left: 35.47%;
      }
      .burgundy{
        position: absolute;
        display: table;
        top: 41.36%;
        right: 19.47%;
      }
      .bordeaux{
        position: absolute;
        display: table;
        top: 66.23%;
        left: 25.07%;
      }
      .cognac{
        position: absolute;
        display: table;
        top: 48.69%;
        left: 25.87%;
      }
      .rhone{
        position: absolute;
        display: table;
        top: 67.54%;
        right: 23.87%;
      }
      .provence{
        position: absolute;
        display: table;
        top: 69.5%;
        right: 7%;
      }
      .languedoc{
        position: absolute;
        display: table;
        top: 76.1%;
        left: 44.73%;
      }
    }
    .filter-goods{
      padding-bottom: 59px;
      .filter-one-goods{
        border-top: 4px solid #f5f5f5;
        h1{
          margin: 13px 18px 12px;
          font-size: $word-fondsize;
          color: #000000;
        }
        p.remark{
          color: $word-color;
          font-size: 12px;
          margin: 0 18px 13px;
        }
        .goods-detail{
          display: block;
          border-top: 1px solid #f5f5f5;
          overflow: hidden;
          .goods-img{
            float: left;
            margin: 13px 36px 13px 15px;
            position: relative;
            width: 120px;
            height: 120px;
            .collect-icon{
              position: absolute;
              right: 5px;
              top: 4px;
            }
          }
          .goods-info{
            float: left;
            margin-top: 36px;
            width: calc(100% - 186px);
            h2{
              font-size: 12px;
              color: #000000;
              margin-bottom: 2px;
            }
            p.little-info{
              font-size: 12px;
              color: #555555;
              margin-bottom: 2px;
              span, a{
                color: #e92d46;
              }
            }
          }
        }
      }
    }
  }
  .filter-origin-topic{
    width: calc(100% - 76px);
    position: fixed;
    top: 0;
    height: 100%;
    background: #fff;
    z-index: 997;
    max-height: 100%;
    overflow: hidden;
    .filter-content{
      overflow-y: auto;
      max-height: 100%;
      height: 100%;
      margin-bottom: 50px;
    }
    h1{
      font-size: 13px;
      color: $word-color;
      text-indent: 16px;
      height: 35px;
      line-height: 35px;
      background: #f5f5f5;
    }
    .all-originals{
      overflow: hidden;
      padding-bottom: 4px;
      border-bottom: 1px solid #f5f5f5;
      h2{
        font-size: 13px;
        color: $word-color;
        margin: 16px 0 12px;
        text-indent: 8px;
      }
      span{
        display: inline-table;
        width: calc(33.33% - 11px);
        font-size: 13px;
        color: $word-color;
        border: 1px solid #bbbbbb;
        border-radius:3px;
        height: 45px;
        line-height: 45px;
        margin-left: 8px;
        text-align: center;
        margin-bottom: 8px;
        box-sizing: border-box;
        &.activity{
          border: 1px solid #e92d46;
           color: #e92d46;
        }
      }
    }
    .all-topics{
      overflow: hidden;
      margin: 0 8px 50px;
      h2{
        font-size: 13px;
        color: $word-color;
        margin: 16px 0 12px;
      }
      span{
        display: table-cell;
        vertical-align: middle;
        width: calc(50% - 4.5px);
        font-size: 13px;
        color: $word-color;
        border: 1px solid #bbbbbb;
        border-radius:3px;
        height: 45px;
        text-align: center;
        float: left;
        margin-bottom: 8px;
        box-sizing: border-box;
        position: relative;
        &.activity{
           border: 1px solid #e92d46;
           color: #e92d46;
        }
        &:nth-child(odd){
          margin-left: 9px;
        }
        p{
          vertical-align: middle;
          position: absolute;
          width: 100%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
    button{
      background: #e92d46;
      height: 45px;
      line-height: 45px;
      width: 100%;
      position: absolute;
      bottom: 0;
      font-size: 18px;
      color: #ffffff;
      border: none;
      &:active{
         background: #fe4b63;
      }
    }
  }
  @media screen and (max-width: 320px){
    .filter-origin .filter-goods .filter-one-goods .goods-detail .goods-img{
      margin: 13px 20px 13px 15px;
    }
    .filter-origin .filter-goods .filter-one-goods .goods-detail .goods-info{
      margin-top: 26px;
      width: calc(100% - 170px);
    }
  }
</style>
